<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            /* border: 1px solid red; */
            position: absolute;
        }
    </style>

</head>
<body>
    <canvas class="mycanvas" height="300" width="600"> 

    </canvas>
    <script>
        // 获取画布
        var canvas=document.querySelector('.mycanvas');
        // 获取画笔：
        var paint=canvas.getContext('2d');

        // 起笔：
        // 耳朵：
        paint.beginPath();
        paint.moveTo(90,40);
        paint.quadraticCurveTo(60,90,50,90);
        paint.lineWidth=5;
        paint.stroke()

        paint.beginPath();
        paint.moveTo(150,40);
        paint.bezierCurveTo(90,60,60,70,50,90);
        paint.lineWidth=5;
        paint.stroke()

        paint.beginPath();
        paint.moveTo(150,40);
        paint.bezierCurveTo(180,90,100,90,70,90);
        paint.lineWidth=5;
        paint.stroke()

        // 脸：
        paint.beginPath();
        paint.moveTo(60,90);
        paint.bezierCurveTo(10,130,30,150,90,150);
        paint.lineWidth=5;
        paint.stroke()

        paint.beginPath();
        paint.moveTo(90,150);
        paint.bezierCurveTo(150,130,110,80,90,100);
        paint.lineWidth=5;
        paint.stroke();

        // 眼睛：
        paint.beginPath();
        paint.arc(70,120,2,0,360/180*Math.PI,false);
        paint.strokeStyle='#000';
        paint.stroke()

        // 身体：
        paint.beginPath();
        paint.moveTo(100,150);
        paint.quadraticCurveTo(50,160,30,190);
        paint.lineWidth=5;
        paint.lineCap='round'
        paint.stroke();

        paint.beginPath();
        paint.moveTo(100,150);
        paint.bezierCurveTo(230,130,220,230,90,230);
        paint.lineWidth=5;
        paint.lineCap='round'
        paint.stroke();


        // 尾巴
        paint.beginPath();
        paint.moveTo(160,190);
        paint.quadraticCurveTo(170,190,180,210);
        paint.lineWidth=8;
        paint.stroke();


        document.onkeydown = function(e) {
            var e = e || window.event;
            console.log(e.keyCode);
            switch (e.keyCode) {
                case 38:
                    canvas.style.top = canvas.offsetTop - 100 + 'px';
                    console.log(1);
                    break;
                case 40:
                    canvas.style.top = canvas.offsetTop + 100 + 'px';
                    console.log(2);
                    break;
                case 39:
                    // canvas.style.backgroundColor = 'aqua';

                    canvas.style.left = canvas.offsetLeft + 100 + 'px';
                    break;
                case 37:
                    canvas.style.left = canvas.offsetLeft - 100 + 'px';
                    break;
                    return false;
            }
        }
    </script>
</body>
</html>